<template>
  <div class="w1 h1 main_content">
    <!-- 搜索条 -->
    <div class="search-content">
      <Col class="panel search-panel" :span="24">
        <Form :model="formHeader" :label-width="80" inline>
          <FormItem label="所属城市：">
            <Select v-model="formHeader.cityId" style="width:200px" clearable>
              <Option
                v-for="(item, index) in cityList"
                :value="item.id"
                :key="index"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="企业名称：">
            <Input
              v-model.trim="formHeader.companyName"
              style="width:200px"
              clearable
            ></Input>
          </FormItem>
          <FormItem class="margin-left-20">
            <Button
              type="primary"
              style="margin-right:20px;"
              @click="_queryThing"
              >查询</Button
            >
            <Button
              type="primary"
              @click="_addNew"
              :disabled="userRole === 'ROLE_DEMO'"
              >新增企业</Button
            >
          </FormItem>
        </Form>
      </Col>
    </div>
    <div class="w1 scroll__content company_content">
      <Row class="scroll-content__row">
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24">
          <Table
            size="small"
            style="width: 100%;"
            :loading="pageInfo.loading"
            :columns="userRole === 'ROLE_DEMO' ? columnsOfDemo : columns"
            :data="tableData"
            border
          ></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel cf" :span="24">
          <Page
            :total="pageInfo.total"
            :page-size="15"
            class="fr"
            @on-change="switchThePaging"
            :current.sync="pageInfo.page"
          />
        </Col>
        <Col :span="24" class="page-bottom"> </Col>
        <Modal
          :styles="{ top: '66px' }"
          width="680"
          v-model="dialogVisible"
          title="新增企业"
        >
          <transition name="dialog-form-fade">
            <companyForm
              v-if="dialogVisible"
              @btnDisable="toggleBtnDisable"
              @save="finishSave"
              ref="addCompanyDialogRef"
            />
          </transition>
          <div slot="footer">
            <Button @click="dialogVisible = false">取消</Button>
            <Button
              type="primary"
              @click="isValidateForm"
              :loading="btnDisable"
            >
              <span v-if="!btnDisable">确定</span>
              <span v-else>加载中</span>
            </Button>
          </div>
        </Modal>
      </Row>
    </div>
  </div>
</template>
<script>
import {
  getCompanyListOfNew,
  getCityListOfNew,
  getCompanyList,
  getCompanyListByCity,
  removeCompany
} from "@/api";

import {
  validateCityName,
  validateAddress,
  validateTelephone,
  validateTelphone1
} from "@/utils/rules";

import companyForm from "./components/companyForm";
import { mapMutations, mapState, mapGetters } from "vuex";

import { generatedColumns, columnsOfDemo } from "./utils";
export default {
  components: {
    companyForm
  },
  async mounted() {
    await this._getCityList();
    !!this.$route.query.page && (this.pageInfo.page = this.$route.query.page);
    this._getCompanyList();
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    }),
    ...mapGetters(["token"])
  },
  data() {
    const vm = this;
    return {
      dialogVisible: false,
      formHeader: {
        cityId: "",
        companyName: ""
      },
      pageInfo: {
        total: 0,
        page: 1,
        loading: false
      },

      btnDisable: false,
      editForm: {},
      cityList: [],
      selectRow: {},
      columnsOfDemo: [...generatedColumns(vm, true)],
      columns: [...generatedColumns(vm, false)],
      tableData: []
    };
  },
  methods: {
    ...mapMutations(["SET_COMPANYID"]),

    // 切换分页
    switchThePaging(index) {
      const _t = this;
      _t.pageInfo.page = index;
      _t._getCompanyList();
    },

    finishSave(flag) {
      this.btnDisable = flag;
      this.dialogVisible = false;
      this._queryThing();
    },

    toggleBtnDisable(flag) {
      this.btnDisable = flag;
    },

    // 保存，调用子组件方法
    isValidateForm() {
      this.$refs.addCompanyDialogRef.submit();
    },

    // 删除
    handleDelete(row) {
      const _t = this;
      removeCompany(row.id).then(res => {
        if (res.code == 200) {
          _t.$Message.success("删除企业成功");
          _t._getCompanyList();
        }
      });
    },

    // 表格行点击
    rowClick(row) {
      this.selectRow = row;
      let selectRow = JSON.stringify({ ...row, page: this.pageInfo.page });

      let params = encodeURIComponent(selectRow);
      this.$router.push({
        path: "/company/info",
        query: {
          params
        }
      });
    },

    // 新增企业
    _addNew() {
      this.dialogVisible = true;
    },

    // 获取城市列表
    _getCityList() {
      let vm = this;
      return new Promise((resolve, reject) => {
        getCityListOfNew().then(res => {
          if (res.code === 200) {
            vm.cityList = res.data;
            resolve();
          }
        });
      });
    },

    // 获取企业列表
    _getCompanyList() {
      const _t = this;
      _t.pageInfo.loading = true;
      let params = Object.assign({}, _t.formHeader, {
        page: _t.pageInfo.page,
        size: 15
      });
      _t.selectRow = {};
      getCompanyListOfNew(params).then(res => {
        if (res.code == 200) {
          _t.tableData = res.data.list;
          _t.pageInfo.total = res.data.total;
          setTimeout(_ => {
            _t.pageInfo.loading = false;
          }, 500);
        }
      });
    },

    // 查询
    _queryThing() {
      const _t = this;
      _t.pageInfo.page = 1;
      _t._getCompanyList();
    }
  }
};
</script>
